<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>canvas 裁剪图片上传</title>
    </head>
    <body>
        <div id="app">
            <input type="file" name="file" id="select-file" accept="image/*" />
            <div class="container">
                <div class="crop">
                    <div class="crop-box">
                        <!-- 底图 -->
                        <img src="" alt="" class="crop-preview-img" />
                        <!-- 蒙层 -->
                        <div class="mask"></div>
                        <!-- 蒙层上叠加的相同图片，clip-path 裁剪表示当前裁剪内容 -->
                        <img src="" alt="" class="crop-viewport-img" />
                        <!-- 可拖动裁剪框，通过它动态设置 clip-path 裁剪区域，实现裁剪交互 -->
                        <div class="crop-viewport">
                            <!-- box四条边可拖动区域 -->
                            <div class="edge edge-top"></div>
                            <div class="edge edge-bottom"></div>
                            <div class="edge edge-right"></div>
                            <div class="edge edge-left"></div>
                            <!-- box四角可拖动区域 -->
                            <div class="corner corner-lt"></div>
                            <div class="corner corner-lb"></div>
                            <div class="corner corner-rt"></div>
                            <div class="corner corner-rb"></div>
                        </div>
                    </div>
                </div>
                <div class="preview-box">
                    <img class="preview-img" src="" />
                </div>
            </div>
            <button class="upload">上传/保存</button>
        </div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>
